<template>
  <div style="height:100%;width:100%;">
    <div class="volumePie" style="height:100%;width:100%;left:50%;top:50%;transform: translate(-50%,-50%);"></div>
  </div>
</template>


<script>
export default {
  name: "volumePie",
  props: {
    structDTOData:{
      type:Array,
      default: () => []
    },
  },
  watch:{
    structDTOData(val){
      this.getPie(val);
    },
  },
  methods: {
    getPie(val) {
      // { name: '电子渠道', value: 100 },
      // { name: '政企渠道', value: 100 },
      // { name: '实体渠道', value: 100 },
      let dataList = [];
      val.map((item,index)=>{
        let obj = {
          value:"",
          name:""
        }
        obj.name = item.indexName
        obj.value = item.indexValue;
        dataList.push(obj)
      })
      var myChart = this.$echarts.init(document.querySelector(".volumePie"));
      let option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c}万元 {d}%"
                },
                series:[
                  {
                      left:'center',//离容器左侧的距离
                      top: 'top',//距离容器上测的距离
                      center: ['50%', '50%'],
                      radius: '40%',
                      type: 'pie',
                      name:'发展量渠道构成',
                      data:dataList,
                      itemStyle: {
                           emphasis: {
                               shadowBlur: 10,
                               shadowOffsetX: 0,
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                           normal:{
                               color:function(params) {
                               //自定义颜色
                               var colorList = [
                                      '#7f92f7', '#f48892','#f4c178',
                                   ];
                                   return colorList[params.dataIndex]
                                },
                              label: {
                                     formatter:'{b|{b}}\n{hr|}\n{c|{c}万元}',
                                   rich: {
                                        hr: {
                                            borderColor: '#636d9a',
                                            width: '100%',
                                            borderWidth: 0.5,
                                            height: 0,
                                        },
                                          b: {
                                              fontSize: 14,
                                              lineHeight: 24,
                                              color:'#636d9a'
                                          },
                                          c:{
                                            lineHeight: 24,
                                            color:'#636d9a',
                                            fontSize: 16,
                                          }
                                    }
                               },
                               labelLine : {
                                      lineStyle:{
                                      color:'#636d9a',
                                      }
                                  }
                           },
                     }
                  },
                  {
                      left:'center',//离容器左侧的距离
                      top: 'top',//距离容器上测的距离
                      center: ['50%', '50%'],
                      radius: '40%',
                      type: 'pie',
                      name:'发展量渠道构成',
                      data:dataList,
                      itemStyle: {
                           emphasis: {
                               shadowBlur: 10,
                               shadowOffsetX: 0,
                               shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                           normal:{
                               color:function(params) {
                               //自定义颜色
                               var colorList = [
                                       '#7f92f7', '#f48892','#f4c178',
                                   ];
                                   return colorList[params.dataIndex]
                                },
                              label: {
                                   formatter: function (p) {   //指示线对应文字,百分比
                                     return p.percent + "%";
                                   },
                                    position: 'inner',
                                   textStyle: {
                                     color:'#fff',
                                       fontSize: 14,
                                   }
                               },
                                  labelLine : {
                                       show:false,
                                  }
                           },
                     }
                  }
                ],
            };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>
